<template>
  <div>
    <div id="chart_id_c"></div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
let My_chart = null;
export default {
  props: {
    data: Array,
  },
  setup(props) {
    const state = reactive({
      info: [],
    });
    onMounted(() => {
      setTimeout(() => {
        state.info = props.data;
        getMy_chart();
      }, 500);
    });
    //底部折线
    const getMy_chart = () => {
      My_chart = window.echarts.init(document.getElementById("chart_id_c"));
      var xAxisData = [];
      var data = [];
      var data2 = [];
      for (var i = 0; i < 50; i++) {
        xAxisData.push(i);
        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
      }
      let option = {
        backgroundColor: "#88b7d6",
        xAxis: [
          {
            show: false,
            data: xAxisData,
          },
          {
            show: false,
            data: xAxisData,
          },
        ],
        visualMap: {
          show: false,
          min: 0,
          max: 50,
          dimension: 0,
          inRange: {
            color: [
              "#4a657a",
              "#308e92",
              "#b1cfa5",
              "#f5d69f",
              "#f5898b",
              "#ef5055",
            ],
          },
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#4a657a",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#08263f",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "back",
            type: "bar",
            data: data2,
            z: 1,
            itemStyle: {
              normal: {
                opacity: 0.4,
                barBorderRadius: 5,
                shadowBlur: 3,
                shadowColor: "#111",
              },
            },
          },
          {
            name: "Simulate Shadow",
            type: "line",
            data: data,
            z: 2,
            showSymbol: false,
            animationDelay: 0,
            animationEasing: "linear",
            animationDuration: 1200,
            lineStyle: {
              normal: {
                color: "transparent",
              },
            },
            areaStyle: {
              normal: {
                color: "#88b7d6",
                shadowBlur: 0,
                shadowColor: "#000",
              },
            },
          },
          {
            name: "front",
            type: "bar",
            data: data,
            xAxisIndex: 1,
            z: 3,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
              },
            },
          },
        ],
        animationEasing: "elasticOut",
        animationEasingUpdate: "elasticOut",
        animationDelay: function (idx) {
          return idx * 20;
        },
        animationDelayUpdate: function (idx) {
          return idx * 20;
        },
      };
      My_chart.setOption(option);
    };
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
#chart_id_c {
  width: 950px;
  height: 350px;
  position: relative;
  z-index: 999;
}
</style>